<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { getAnimalById, praiseAnimal } from "../../api/animal.js";
import {ElMessage} from "element-plus";

const router = useRouter();
const id = ref(router.currentRoute.value.query.id);
const animal = ref({});
const praise = ref(false);

onMounted(async () => {
    const resp = await getAnimalById(id.value);
    animal.value = resp.data;
    console.log(animal.value);
});

async function praiseClick() {
    if (praise.value) {
        ElMessage({
            message: '你已经点过赞了',
            type: 'warning',
            duration: 3000
        });
        return;
    }
    try {
        const response = await praiseAnimal(id.value);
        animal.value.praise = response.data.praise_count;
        praise.value = true; // 防止重复点赞
        ElMessage({
            message: '点赞成功',
            type: 'success',
            duration: 3000
        });
    } catch (error) {
        console.error('Error praising animal:', error);
        ElMessage({
            message: '点赞失败',
            type: 'error',
            duration: 3000
        });
    }
}
</script>

<template>
    <div class="container">
        <div class="flex-container">
            <div class="image-container">
                <img :src="animal.img" alt="" class="animal-image"/>
            </div>

            <div class="info-container">
                <el-card>
                    <div class="nickname">{{ animal.nickname }}</div>
                    <div class="info">
                        <div class="info-item">性别: <span style="margin-left: 85px">{{ animal.sex }}</span></div>
                        <div class="info-item">种类: <span style="margin-left: 85px">{{ animal.type }}</span></div>
                        <div class="info-item">年龄: <span style="margin-left: 83px">{{ animal.age }}</span></div>
                        <div class="info-item">活动范围: <span style="margin-left: 50px">{{ animal.address }}</span>
                        </div>
                        <div class="info-item">身体状态: <span style="margin-left: 50px">{{ animal.status }}</span>
                        </div>
                        <div class="info-item">其他描述: <span style="margin-left: 50px">{{ animal.information }}</span>
                        </div>
                        <div class="praise-container">
                            <img src="../../assets/点赞.png" alt="" class="praise-icon" @click="praiseClick"
                                 :class="{ 'praised': praise }">
                            <span class="praise-count">{{ animal.praise }}</span>
                        </div>
                    </div>
                </el-card>
            </div>
        </div>

    </div>
</template>


<style scoped>
.container {
    min-height: calc(100vh - 60px);
    margin: 10px 0;
}

.flex-container {
    display: flex;
}

.image-container {
    width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
}

.animal-image {
    max-width: 100%;
    max-height: 100%;
    border-radius: 10px;
}

.info-container {
    padding-left: 30px;
    width: 500px;
}

.nickname {
    font-size: 26px;
}

.info {
    line-height: 30px;
    margin-top: 20px;
}

.info-item {
    display: flex;
}

.praise-container {
    margin-top: 10px;
    color: red;
}

.praise-icon {
    width: 30px;
    cursor: pointer;
}

.praise-count {
    position: relative;
    top: -5px;
}

.praised {
    filter: grayscale(0);
}

</style>